<template>
  <!-- 单个日期 -->
  <el-date-picker
    v-if="type == 'date'"
    type="date"
    v-model="dateValue"
    :placeholder="placeholder"
    :disabled-date="disabledDate"
    :shortcuts="shortcutsDate"
    :disabled="disabled"
    :format="format"
    :value-format="valueFormat"
    popper-class="custom-date-popper-class"
    style="width: 100%;"
  />
  <!-- 日期范围 -->
  <el-date-picker
    v-else-if="type == 'daterange'"
    type="daterange"
    v-model="dateValue"
    :unlink-panels="unlinkPanels"
    range-separator="➞"
    :disabled-date="disabledDate"
    :disabled="disabled"
    :format="format"
    :value-format="valueFormat"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    :shortcuts="shortcuts"
    popper-class="custom-date-range-popper-class"
    style="width: 100%;"
  />
  <!-- 单月 -->
  <el-date-picker
    v-else-if="type == 'month'"
    v-model="dateValue"
    type="month"
    :disabled="disabled"
    :format="format"
    :value-format="valueFormat"
    :placeholder="placeholder"
    popper-class="custom-month-popper-class"
    style="width: 100%;"
  />
  <!-- 多月 -->
  <el-date-picker
    v-else-if="type == 'months'"
    v-model="dateValue"
    type="months"
    :disabled="disabled"
    :format="format"
    :value-format="valueFormat"
    :placeholder="placeholder"
    popper-class="custom-months-popper-class"
    style="width: 100%;"
  />
  <!-- 单年 -->
  <el-date-picker
    v-else-if="type == 'year'"
    v-model="dateValue"
    type="year"
    :disabled="disabled"
    :format="format"
    :value-format="valueFormat"
    :placeholder="placeholder"
    popper-class="custom-year-popper-class"
    style="width: 100%;"
  />
  <!-- 年范围 -->
  <el-date-picker
    v-else-if="type == 'years'"
    v-model="dateValue"
    type="years"
    :disabled="disabled"
    :format="format"
    :value-format="valueFormat"
    :placeholder="placeholder"
    popper-class="custom-years-popper-class"
    style="width: 100%;"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElDatePicker } from "element-plus";

interface Props {
  type?: string;
  value?: string | number | string[] | Date;
  disabled?: boolean;
  placeholder?: string;
  startPlaceholder?: string;
  endPlaceholder?: string;
  unlinkPanels?: boolean;
  intervalIs?: boolean;
  intervalDay?: number;
  maxYear?: number;
  format?: string;
  valueFormat?: string;
  disabledDate?: (res: any) => {},
}

const props = withDefaults(defineProps<Props>(), {
  type: "daterange", //选择器类型、默认日期范围选择器
  value: "",
  placeholder: "--请选择--",
  disabled: false,
  startPlaceholder: "开始日期",
  endPlaceholder: "结束日期",
  unlinkPanels: false, //取消两个之间的联动
  intervalIs: false,
  intervalDay: 31,
  maxYear: 3,
  format: "YYYY-MM-DD",
  valueFormat: "YYYYMMDD",
  disabledDate: (time: Date) => { //禁止选择的数据范围（单独传递）
    return false;
  }
});

const dateValue = ref(props.value);
const type = ref(props.type);
const shortcutsDate = [
  {
    text: "定位到今日",
    value: new Date(),
  },
];


const shortcuts = [
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
</script>

<style lang="scss">
// 单日选择器
.custom-date-popper-class {
  .el-date-picker.has-sidebar {
    width: 320px;
  }
  .el-picker-panel *[slot="sidebar"],
  .el-picker-panel__sidebar {
    position: absolute;
    top: calc(100% - 40px);
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    .el-picker-panel__shortcut {
      text-align: center;
      color: var(--theme-primary);
    }
  }
  .el-picker-panel__body {
    margin: 0;
    padding-bottom: 30px;
  }
  // .el-picker-panel__content tr:first-child {
  //   display: none;
  // }
  .el-date-table .el-date-table__row td,
  .el-date-table-cell {
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
  }
  .el-date-table__row {
    margin-bottom: 10px;
    height: 40px;
  }
  .el-date-table td .el-date-table-cell .el-date-table-cell__text {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
  }
  /** 选择的日期 */
  .available.current .el-date-table-cell {
    background-color: var(--theme-primary);
    border-radius: 6px;
  }
  /** 今天 */
  .available.today .el-date-table-cell {
    border: 1px solid var(--theme-primary);
    color: var(--theme-primary);
    border-radius: 6px;
    .el-date-table-cell__text {
      margin-top: -6px;
    }
    .el-date-table-cell__text::after {
      content: "今";
      display: block;
      margin-top: -10px;
    }
  }
  .el-date-table td.current:not(.disabled) .el-date-table-cell__text {
    background-color: transparent !important;
  }
}
// 日期范围选择器
.custom-date-range-popper-class {
  .el-date-range-picker.has-sidebar {
    width: 650px;
  }
  .el-date-table td .el-date-table-cell {
    padding: 0;
  }
  .el-picker-panel *[slot=sidebar], .el-picker-panel__sidebar {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
  }
  .el-picker-panel__shortcut {
    width: auto;
    margin: 0 20px;
  }
  .el-picker-panel *[slot=sidebar] + .el-picker-panel__body, .el-picker-panel__sidebar + .el-picker-panel__body {
    margin-left: 0;
    margin-top: 60px;
  }
  .el-date-table td .el-date-table-cell .el-date-table-cell__text {
    border-radius: 4px;
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .el-date-table td.start-date .el-date-table-cell__text,
  .el-date-table td.end-date .el-date-table-cell__text {
    line-height: 18px;
  }
  .el-date-table td.in-range .el-date-table-cell {
    background-color: var(--theme-primary-background);
  }
  // 起/止
  .el-date-table td.start-date .el-date-table-cell__text::after, 
  .el-date-table td.end-date .el-date-table-cell__text::after {
    content: "起";
    display: block;
    margin-top: -6px;
  }
  .el-date-table td.end-date .el-date-table-cell__text::after {
    content: "止";
  }
}
// 单月选择日期
// 月范围选择器
.custom-month-popper-class,
.custom-months-popper-class {
  .el-month-table td:hover .el-date-table-cell__text {
    background-color: var(--theme-primary-background);
    color: var(--theme-primary);
    border-radius: 4px;
  }
  .el-month-table td.today .el-date-table-cell__text {
    border: 1px solid var(--theme-primary);
    border-radius: 4px;
  }
  .el-month-table td.current:not(.disabled) .el-date-table-cell__text {
    border-radius: 4px;
  }
  .el-picker-panel__footer {
    display: none !important;
  }
}

// 单年选择器
// 年范围选择器
.custom-year-popper-class,
.custom-years-popper-class {
  .el-date-picker td:hover .el-date-table-cell__text {
    background-color: var(--theme-primary-background);
    color: var(--theme-primary);
    border-radius: 4px;
  }
  .el-date-picker td.today .el-date-table-cell__text {
    border: 1px solid var(--theme-primary);
    border-radius: 4px;
  }
  .el-date-picker td.current:not(.disabled) .el-date-table-cell__text {
    border-radius: 4px;
  }
  .el-picker-panel__footer {
    display: none !important;
  }
}
</style>
